<template>
  <div class="app-container">
    <div>
      <toolbar
        @refresh="handleRefresh"
        :buttons="['submit', 'log']"
        :moduleCode="$enums.moduleType.organization.value"
        @submit="handleEdit"
      >
      </toolbar>
    </div>
    <div style="padding-top: 10px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="card-title">基本信息</span>
        </div>
        <div class="text item">
          <el-form
            :inline="true"
            :model="organization"
            ref="baseInfoForm"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="显示名称" prop="name">
              <el-input
                v-model="organization.name"
                style="width: 199px"
              ></el-input>
            </el-form-item>
            <el-form-item label="法定名称" prop="officialName">
              <el-input
                v-model="organization.officialName"
                style="width: 199px"
              ></el-input>
            </el-form-item>
            <el-form-item label="纳税识别号" prop="taxIDNumber">
              <el-input
                v-model="organization.taxIDNumber"
                style="width: 199px"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div style="padding-top: 20px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="card-title">财务信息</span>
        </div>
        <div class="text item">
          <el-form
            :inline="true"
            :model="organization"
            ref="financeForm"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="本位币" prop="standardCurrencyId">
              <currencySelect
                v-model="organization.standardCurrencyId"
              ></currencySelect>
            </el-form-item>
            <el-form-item label="会计准则" prop="accountingStandard">
              <standardSelect v-model="organization.accountingStandard">
              </standardSelect>
            </el-form-item>
            <el-form-item label="启用日期" prop="activatedDate">
              <el-date-picker
                v-model="organization.activatedDate"
                type="month"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  getOrganization,
  updateOrganization,
  addOrganization,
} from "@/api/organization";
import currencySelect from "@/components/Select/currencySelect.vue";
import standardSelect from "@/components/Select/accountStandardSelect.vue";
import toolbar from "@/components/Bar/toolbar.vue";
export default {
  components: {
    currencySelect,
    standardSelect,
    toolbar,
  },
  data() {
    return {
      organization: {
        id: null,
        name: "",
        officialName: "",
        taxIDNumber: "",
        activationDate: null,
        standardCurrencyId: null,
        accountingStandard: null,
      },
      rules: {
        name: [{ required: true, message: "请输入显示名称", trigger: "blur" }],
        officialName: [
          { required: true, message: "请输入法定名称", trigger: "blur" },
        ],
        currencyId: [
          { required: true, message: "请选择币别", trigger: "blur" },
        ],
        activatedDate: [
          { required: true, message: "请选择启用日期", trigger: "blur" },
        ],
        accountingStandard: [
          { required: true, message: "请选择会计准则", trigger: "blur" },
        ],
        standardCurrencyId: [
          { required: true, message: "请选择本位币", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        getOrganization()
          .then((res) => {
            this.organization = res || {};
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    validateBaseInfoForm() {
      return new Promise((resolve, reject) => {
        this.$refs["baseInfoForm"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    validateFinanceForm() {
      return new Promise((resolve, reject) => {
        this.$refs["financeForm"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    handleEdit() {
      Promise.all([
        this.validateBaseInfoForm(),
        this.validateFinanceForm(),
      ]).then(() => {
        this.saveData();
      });
    },
    saveData() {
      if (!this.organization.id) {
        addOrganization(this.organization).then((res) => {
          if (res) {
            this.$notify({
              title: "成功",
              message: "保存成功",
              type: "success",
              position: "bottom-right",
            });
            this.getData();
          }
        });
      } else {
        updateOrganization(this.organization).then((res) => {
          if (res) {
            this.$notify({
              title: "成功",
              message: "保存成功",
              type: "success",
              position: "bottom-right",
            });
            this.getData();
          }
        });
      }
    },
    handleRefresh() {
      this.getData();
    },
  },
};
</script>
<style scoped>
.card-title {
  font-weight: bold;
}
</style>
